<template>
    <div class="title">
        我的考试成绩
    </div>
    <template v-for="examInfo in examInfos" :key="Number(examInfo.date)/1000">
        <el-card class="exam-info"
                 v-bind:class="isJudgeScore(examInfo)==='score-not-pass-score' ? 'score-not-pass' : 'score-pass'">
            <div class="exam-info-title">
                {{ examInfo?.courseName }}
            </div>
            <div class="exam-info-teacher">
                任课老师：{{ examInfo?.teacherName }}
            </div>
            <div class="exam-info-time">
                考试时间：{{ (timestampToDate(String(Number(examInfo?.date) / 1000))).split(" ")[0] }}
                {{ examInfo?.startTime }} - {{ examInfo?.endTime }}
            </div>
            <div class="exam-info-method">
                考试类型：{{ examInfo?.assessmentMethod }}-{{ examInfo?.method }}
            </div>
            <div class="exam-info-score score-right-center" v-bind:class="isJudgeScore(examInfo)">
                {{ examInfo?.score }}
            </div>
        </el-card>
    </template>
</template>

<script setup lang="ts">
import {timestampToDate} from "@/util/time.utils";
import {onMounted, ref} from "vue";
import {getStudentResults} from "@/service/student/student.service";

const examInfos = ref<any[]>([])

onMounted(() => {
    getStudentResults((data: any) => {
        for (const examInfo of data.studentExamResultInfoList) {
            examInfos.value.push(examInfo)
        }
    })
})

/**
 * 判断学生成绩评级
 * @param examInfo
 */
function isJudgeScore(examInfo: any) {
    let score = Number(examInfo.score)
    if (score < 60) {
        return 'score-not-pass-score'
    }
    if (score < 90) {
        return 'score-pass-score'
    }
    if (score >= 90) {
        return 'score-good-score'
    }
}

</script>


<style scoped>
.title {
    font-size: 20px;
    margin-bottom: 10px;
}

.exam-info {
    margin: 10px;
    position: relative;
    
}

.score-pass {
    background-color: #d8ffe1;
}

.score-not-pass {
    background-color: #fccfcf;
}

.score-not-pass-score {
    color: #e50e0e;
}

.score-pass-score {

}

.score-good-score {
    color: #68a14a;
}

.exam-info-title {
    font-size: 20px;
    font-weight: bold;
}

.exam-info-score {
    font-style: italic;
    font-weight: bold;
    font-size: 50px;
}

.score-right-center {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
}
</style>